<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
    <script>
      function delay() {
        return new Promise((resolve, reject) => {
          setTimeout(() => {
            resolve('我成功了')
            // reject('我失败了')
          }, 2000)
        })
      }
      console.log(1)
      delay()
        .then((res) => {
          console.log(res)
          // res是接口内容
          // 只能在这里去渲染页面
          // ……
          return delay()
        })
        .then()
        .then()
      console.log(2)
      // async 写在函数声明的地方
      // await 写在async修饰的这一个函数的内部
      // await 后面跟的是一个promise
      // await 等待后面的promise 成功（.then）
      // 让代码写起来 和同步代码一样
      async function asyncCall() {
        console.log(1)
        const data = await delay()
        console.log(data)
        const data1 = await delay()
        console.log(data1)
        const data2 = await delay()
        console.log(data2)
        // data是接口数据
        // 渲染页面
        // console.log(data)
        console.log(2)
      }
      asyncCall()

      // 机器人聊天：第一个问题回复之后，再去问第二个问题
      async function chatRobot() {
        const result1 = await axios({
          url: 'http://ajax-api.itheima.net/api/robot',
          params: {
            spoken: '肚子饿了吗',
          },
        })
        console.log('result1', result1)
        const result2 = await axios({
          url: 'http://ajax-api.itheima.net/api/robot',
          params: {
            spoken: '准备吃点什么',
          },
        })
        console.log('result2', result2)
        const result3 = await axios({
          url: 'http://ajax-api.itheima.net/api/robot',
          params: {
            spoken: '晚上约饭吗',
          },
        })
        console.log('result3', result3)
      }
      chatRobot()
    </script>
  </body>
</html>
